<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="el-header" style="height: 60px;">
      <div class="el-row">
        <div class="el-col el-col-24">
          <ul class="el-menu-demo el-menu--horizontal el-menu" style="background-color: rgb(84, 92, 100);">
            <li class="el-menu-item">
              <div class="el-image"><img src="./assets/logo.png" class="el-image__inner" style="object-fit: fill;"></div>
            </li>
            <li class="el-menu-item is-active">WebRTC测试</li>
            <!-- 其他导航项 -->
          </ul>
        </div>
      </div>
    </header>

    <main class="el-main">
      <!-- WebRTC 视频区域 -->
      <div class="el-row">
        <div class="el-col el-col-12">
          <video ref="videoRef" controls autoplay class="videobox">
            Your browser is too old which doesn't support HTML5 video.
          </video>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="el-form">
        <el-form-item label="url">
          <el-input v-model="webrtc.url"></el-input>
        </el-form-item>
        <!-- 其他表单项 -->
        <el-button @click="startWebRTC">开始(start)</el-button>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import ZLMRTCClient from '.../ZLMRTCClient.js';

// 响应式数据
const webrtc = reactive({
  url: '',
  debug: true,
  type: 'play',
  resolution: '',
  // 其他 WebRTC 相关配置
});

const videoRef = ref(null);
let webrtcPlayer = null;

// 生命周期 - 挂载后
onMounted(() => {
  // 初始化 WebRTC
  const initWebRTC = () => {
    webrtcPlayer = new ZLMRTCClient.Endpoint({
      element: videoRef.value,
      debug: webrtc.debug,
      zlmsdpUrl: webrtc.url,
      // 其他配置项
    });

    // 事件监听
    webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
      console.log('播放成功', e.streams);
    });
  };

  initWebRTC();
});

// 生命周期 - 卸载前
onUnmounted(() => {
  if (webrtcPlayer) {
    webrtcPlayer.close();
    webrtcPlayer = null;
  }
});

// 启动 WebRTC
const startWebRTC = () => {
  if (!webrtc.url) {
    console.log('请输入 URL');
    return;
  }
  // 重新初始化或更新配置
  if (webrtcPlayer) webrtcPlayer.close();
  // 调用初始化逻辑
};
</script>

<style scoped>
.videobox {
  width: 100%;
  height: 400px;
  border: 1px solid #e5e7eb;
}
</style>